<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">调拨类型:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 20px;">
				<el-select size="small" v-model="condition.approvalflowPId" placeholder="请选择审批流类型" clearable @change="transferQuery()">
					<el-option v-for="item in transferTypeCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>

			<el-col :span="15" style="padding-left: 0px;text-align: right">
				<!--<el-button type="primary" size="small" v-on:click='transferQuery'>查询</el-button>-->
				<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
				<!--<el-button type="primary" size="small" v-on:click='editCom'>编辑</el-button>-->
				<el-button type="primary" size="small" v-on:click='startCom'>启用</el-button>
				<el-button type="primary" size="small" v-on:click='stopCom'>停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="起始状态" prop="startStatus">
					</el-table-column>
					<el-table-column label="起始角色" align="right" :formatter="roleCov">
					</el-table-column>
					<el-table-column label="流转状态" align="right" prop="circulationStatus">
					</el-table-column>
					<el-table-column label="流转角色" align="right" :formatter="roleCovs">
					</el-table-column>
					<el-table-column label="状态" align="right" :formatter="statusCovs">
					</el-table-column>
					<!--<el-table-column label="停用日期" align="right" prop="stopDate">
					</el-table-column>
					<el-table-column label="操作" align="right" width="80">
						<template scope="scope">
							<el-tooltip class="item" effect="light" content="佣金" placement="top">
								<el-button type="primary" size="mini" icon="setting" @click.native.prevent="info(scope.$index)"></el-button>
							</el-tooltip>
						</template>
					</el-table-column>-->
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>

		<el-dialog title="审批流维护" v-model="transferFormShow" size="small">
			<el-form :model="transferFormData" ref="transferForm" :rules="Rule" label-width="150px" style="height: 150px;">
				<el-col :span="12">
					<el-form-item label="起始状态：" prop="startStatus" required>
						<el-input size="small" v-model="transferFormData.startStatus"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="起始角色：" prop="startRoles" required>
						<el-select size="small" v-model="transferFormData.startRoles" placeholder="请选择起始角色" clearable>
							<el-option v-for="item in roleCombo" :label="item.rName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="流转状态：" prop="circulationStatus" required>
						<el-input size="small" v-model="transferFormData.circulationStatus">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="审核角色：" prop="auditRoles" >
						<el-select size="small" v-model="transferFormData.auditRoles" placeholder="请选择审核角色" clearable>
							<el-option v-for="item in roleCombo" :label="item.rName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="transferFormShow = false">取 消</el-button>
				<el-button type="primary" v-on:click='save'>提 交</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {

				//审批流类型下拉
				transferTypeCombo: [],

				//审批流类型转换
				transferConvertData: {},

				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},

				condition: {
					approvalflowPId: "",
				},

				transferFormShow: false,
				//校验规则
				Rule: {
					startStatus: [{
						required: true,
						message: '请填写起始状态',
						trigger: 'blur'
					}],
					startRoles: [{
						required: true,
						message: '请选择起始角色',
						trigger: 'blur'
					}],
					circulationStatus: [{
						required: true,
						message: '请填写流转状态',
						trigger: 'blur'
					}],
				},
				//校验规则
				Rules: {},
				transferFormData: {
					id: "", //节点id
					startStatus: "", //起始状态
					startRoles: "", //起始角色
					circulationStatus: "", //流转状态
					auditRoles: "", //审核角色
					status: "", //状态
					operator: "", //操作人
					companyId: "", //公司ID
					approvalflowPId: "", //审批流节点父ID
				},
				emptytransferFormData: {
					id: "", //节点id
					startStatus: "", //起始状态
					startRoles: "", //起始角色
					circulationStatus: "", //流转状态
					auditRoles: "", //审核角色
					status: "", //状态
					operator: "", //操作人
					companyId: "", //公司ID
					approvalflowPId: "", //审批流节点父ID
				},

				multipleSelection: [],
				companyId: "",
				//address:"",
				roleCombo: [],
				roleConvert: {},
			}
		},
		methods: {
			//角色转换
			roleCov: function(row, column) {
				return this.$data.roleConvert[row.startRoles];
			},
			//角色转换
			roleCovs: function(row, column) {
				return this.$data.roleConvert[row.auditRoles];
			},
			statusCovs:function(row, column){
				return row.status == "0" ? '已停用' : '已启用';
			},
			//审批流状态转换
			statusCov: function(row, column) {
				return row.status == "0" ? '已停用' : '已启用';
			},

			//审批流类型解析
			transferTypeCov: function(row, column) {
				return this.$data.transferConvertData[row.approvalflowPId];
			},
			transferTypeCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "transfer"
					}
				}).then((response) => {
					this.$data.transferConvertData = response.data;
				}, (response) => {});
			},
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			add: function() {
				//先清空
				this.$data.transferFormData = Object.assign(this.$data.transferFormData, this.$data.emptytransferFormData);
				//赋予pID
				this.$data.transferFormData.approvalflowPId = this.$data.condition.approvalflowPId;
				//判断有没有开始
				this.$http.get(this.API_ROOT + '/scm/approvalflow/isExistStart', {
					params: {
						approvalflowPId: this.$data.condition.approvalflowPId,
					}
				}).then((response) => {
					debugger;
					if(response.data) {
						this.editCom();
					} else {
						this.$data.transferFormData.startStatus = "开始";
					}
				}, (response) => {
					// error callback
				});

				this.$data.transferFormShow = true;

			},
			oAddress: function(val) {
				debugger;
				if(val != '1') {
					this.$data.transferFormData.transferAddress = "";
				}
				if(val == '1') {
					this.address();
				}
			},
			//启用审批流
			startCom: function() {
				if(this.$data.multipleSelection.length == 1) {
					debugger;
					var resRoleData = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/scm/approvalflow/start',
						params: {
							id: resRoleData.id,
						}
					}).then(function(resp) {
						debugger;
						this.transferQuery();
						this.$message(resp.data.msg);
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			//停用审批流
			stopCom: function() {
				if(this.$data.multipleSelection.length == 1) {
					var resRoleData = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/scm/approvalflow/stop',
						params: {
							id: resRoleData.id,
						}
					}).then(function(resp) {
						this.transferQuery();
						this.$message(resp.data.msg);
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据");
				}
			},

			//新增审批流时调用接口查询公司地址
			address: function() {
				this.$http.post(this.API_ROOT + '/scm/transfer/address', {
					params: {}
				}).then(resp => {
					if(resp.data.success) {
						// es5写法
						debugger;
						this.$data.transferFormData.transferAddress = resp.data.data.oAddress;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},

			//编辑审批流
			editCom: function() {
				//var resRoleData = this.$data.multipleSelection[0];
				this.$http.get(this.API_ROOT + '/scm/approvalflow/info', {
					params: {
						pId: this.$data.condition.approvalflowPId,
					}
				}).then((response) => {
					debugger;
					/*startStatus: "", //起始状态
					startRoles: "", //起始角色
					circulationStatus: "", //流转状态
					auditRoles: "", //审核角色*/
					this.$data.transferFormData.startStatus = response.data.data.circulationStatus;
					this.$data.transferFormData.startRoles = response.data.data.auditRoles;
				}, (response) => {
					// error callback
				});
				this.$data.transferFormShow = true;
			},
			//查询审批流
			transferQuery: function() {
				//this.$data.condition.approvalflowPId=this.$data.transferFormData.approvalflowPId;
				debugger;
				this.$http.post(this.API_ROOT + '/scm/approvalflow/page', this.$data.condition, {
					params: {

					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},

			//保存审批流
			save: function() {
				this.$refs.transferForm.validate(function(valid, $event) {
					// 验证通过
					if(valid) {
						debugger;
						this.$http.post(this.API_ROOT + '/scm/approvalflow/save', this.$data.transferFormData)
							.then(resp => {
								if(resp.data.success) {
									debugger;
									this.transferQuery();
									this.$data.transferFormShow = false;
									this.$message(resp.data.msg);
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else {
						return false
					}
				}.bind(this))
			},

			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.baseQuery();
			},
		},
		//表单创建时执行
		created: function() {
			this.$data.condition.approvalflowPId = "0"
			this.transferQuery();
			//获取审批流类型下拉
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "transferType"
				}
			}).then((response) => {
				this.$data.transferTypeCombo = response.data;
			}, (response) => {});
			//获取角色下拉
			this.$http.get(this.API_ROOT + '/rbac/role/roleDateList', {
				params: {
					//group: "approvalflowType"
				}
			}).then((response) => {
				debugger;
				this.$data.roleCombo = response.data.data;
			}, (response) => {});
			//获取角色下拉
			this.$http.get(this.API_ROOT + '/rbac/role/Scmconvert', {
				params: {
					//group: "approvalflowType"
				}
			}).then((response) => {
				debugger;
				this.$data.roleConvert = response.data;
			}, (response) => {});

		}
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
</style>